@import "../common/constants";
@import "../common/header";
@import "../common/body";
@import "../common/footer";

.main{
  .wrapper{
    .image-list{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

      /* 如果最后一行是3个元素 */
      li:last-child:nth-child(4n - 1) {
          margin-right: calc(24% + 5% / 3);
      }
      /* 如果最后一行是2个元素 */
      li:last-child:nth-child(4n - 2) {
          margin-right: calc(48% + 10% / 3);
      }

      li{
        width: 270px;
        height: 180px;
        margin-bottom: 20px;
        &:hover{
          box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
        }

        a{
          width: 100%;
          height: 100%;

          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}